<script setup>
import { ref } from 'vue'
import { fetchCityData } from '../api/weatherAPI'
import { useCityStore } from '../stores/cityStore'

const city = ref('') //用于与api联系

//获取对象实例
const cityStore = useCityStore()

function request() {
  getDate(city.value)
}

async function getDate(cityName) {
  //调用api模块化封装的函数
  const res = await fetchCityData(cityName)
  console.log(res)
  // console.log('更新状态前：')
  // console.log(cityStore.location)
  cityStore.updateLocation(res.location[0])
  // console.log('更新状态后：')
  // console.log(cityStore.location)
}
</script>
<template>
  <div>
    搜索：<input
      type="search"
      name=""
      id=""
      placeholder="请输入城市名称"
      v-model="city"
      @change="request()"
    />
  </div>
</template>